<template>
  <div class="user-management-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="handleEdit($event)"
        >
          添加
        </el-button>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="handleEdit11($event)"
        >
          紧急插单
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input
              v-model.trim="queryForm.MatchString"
              clearable
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table
      ref="tableSortRef"
      v-loading="listLoading"
      :border="border"
      :data="list"
      :height="height"
      :size="lineHeight"
      :stripe="stripe"
      @selection-change="setSelectRows"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        v-for="(item, index) in finallyColumns"
        :key="index"
        align="center"
        :label="item.label"
        :prop="item.prop"
        :sortable="item.sortable"
        width="100"
      >
        <template slot-scope="scope">
          <template v-if="item.label == '工单状态'">
            <el-link
              :underline="false"
              :type="scope.row[item.prop] == '已完成' ? 'primary' : 'warning'"
            >
              {{ scope.row[item.prop] }}
            </el-link>
          </template>
          <template v-else-if="item.label == '加工流程状态'">
            <el-link
              :underline="false"
              :type="scope.row[item.prop] == '已编辑' ? 'primary' : 'warning'"
            >
              {{ scope.row[item.prop] }}
            </el-link>
          </template>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        show-overflow-tooltip
        width="400"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button type="success" @click="jiagong(scope.row)">
            开始加工
          </el-button>
          <!-- <el-button type="primary" @click="handleEdit(scope.row)">
            编辑
          </el-button> -->
          <el-button type="primary" @click="handleEdit21(scope.row)">
            紧急重点
          </el-button>
          <el-button @click="handleEdit1(scope.row)">编辑流程图</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
      <template slot="empty">
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />

    <el-dialog
      :close-on-click-modal="false"
      :visible="dialogVisible"
      title="编辑"
      width="50%"
      :before-close="handleClose"
    >
      <el-form :model="form" labelWidth="150px">
        <el-form-item label="工单编号">
          <el-input
            v-model="form.OrderId"
            :rows="2"
            :readonly="type != 'add' ? true : false"
            type="text"
          />
        </el-form-item>
        <el-form-item label="工单名称">
          <el-input v-model="form.OrderName" :rows="2" type="text" />
        </el-form-item>
        <el-form-item label="产品名称">
          <el-select
            v-model="form.ProducationName"
            placeholder="选择产品"
            @change="producationChange"
          >
            <template v-for="(item, index) in ProducationData">
              <el-option
                :label="item.ProducationName"
                :value="item.ProducationName"
              />
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="产品编号">
          <el-input v-model="form.ProducationId" type="text" />
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker
            v-model="form.StartTime"
            type="date"
            label="请选择开始日期"
            placeholder="请选择开始日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="计划交付日期">
          <el-date-picker
            v-model="form.PlanPayTime"
            type="date"
            label="请选择开始日期"
            placeholder="请选择计划交付日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="提醒日期">
          <el-date-picker
            v-model="form.TipsTime"
            type="date"
            label="请选择提醒日期"
            placeholder="请选择提醒日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="订单数量">
          <el-input v-model="form.PartNum" :rows="2" type="text" />
        </el-form-item>
        <el-form-item label="检测设备">
          <el-select v-model="form.DetectDevice" placeholder="选择检测设备">
            <template v-for="(item, index) in DetectDeviceData">
              <el-option :label="item" :value="item" />
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="检测方式">
          <el-select v-model="form.DetectAction" placeholder="选择检测方式">
            <template v-for="(item, index) in DetectActionData">
              <el-option :label="item" :value="item" />
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="间隔件数" v-if="form.DetectAction == '间隔检测'">
          <el-input v-model="form.IntervalCount" :rows="2" type="text" />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :visible="dialogVisible1"
      title="紧急插单"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form1" label-width="80px">
        <el-form-item label="选择工单">
          <el-select v-model="form1.OrderId" placeholder="选择产请选择选择工单">
            <template v-for="(item, index) in WorkOrderList">
              <el-option :label="item.OrderId" :value="item.OrderId" />
            </template>
          </el-select>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button type="primary" @click="submit1">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      title="日志信息"
      :visible.sync="dialogVisible222"
      width="30%"
      :before-close="handleClose222"
    >
      <el-timeline reverse>
        <el-timeline-item
          v-for="(item, index) in LogList"
          :key="index"
          :timestamp="index"
        >
          <p>零件编号：{{ item.PartId }}</p>
          <p>产品编号：{{ item.ProductId }}</p>
          <p>开始时间：{{ item.StartTime }}</p>
          <p>结束时间：{{ item.EndTime }}</p>
        </el-timeline-item>
      </el-timeline>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible222 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible222 = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import {
    PlanAndProductionList,
    PlanAndProductionDelete,
    StartOrderProcess,
    DeleteOrder,
    GetProduction,
    PlanAndProductionAdd,
    GetDetectTion,
    GetDetectAction,
    RenameOrder,
    OrderManager,
    OrderInsertion,
    Mark,
  } from '@/api/production'
  export default {
    data() {
      return {
        dialogVisible222: false,
        TrayInfoData: [],
        form: {
          OrderId: '',
          OrderName: '',
          ProducationId: '',
          ProducationName: '',
          StartTime: '',
          PlanPayTime: '',
          PartNum: '',
          DetectDevice: '',
          DetectAction: '',
          TipsTime: '',
        },
        form1: {},
        radio: 3,
        formLabelWidth: '100px',
        dialogVisible1: false,
        dialogVisible: false,
        tableSortRef: null,
        editRef: null,
        border: true,
        height: this.$baseTableHeight(1),
        stripe: false,
        lineHeight: 'small',
        isFullscreen: false,
        checkList: [
          '工单状态',
          '加工流程状态',
          '工单编号',
          '产品编号',
          '产品名称',
          '计划交付日期',
          '加工数量',
          '完工数量',
          '合格数量',
          '不合格数量',
          '检测方式',
          '完成率',
          '创建者',
          '创建时间',
          '修改工单名',
        ],
        columns: [
          {
            label: '工单状态',
            prop: 'Stat',
            disableCheck: true,
          },
          {
            label: '加工流程状态',
            prop: 'ProcessStat',
          },
          {
            label: '工单编号',
            prop: 'OrderId',
          },
          {
            label: '工单名称',
            prop: 'OrderName',
          },
          {
            label: '产品编号',
            prop: 'ProducationId',
          },
          {
            label: '产品名称',
            prop: 'ProducationName',
          },
          {
            label: '计划交付日期',
            prop: 'PlanPayTime',
          },
          {
            label: '加工数量',
            prop: 'MachiningCount',
          },
          {
            label: '完工数量',
            prop: 'FinishNum',
          },
          {
            label: '合格数量',
            prop: 'QualifiedNum',
          },
          // {
          //   label: '修改工单名',
          //   prop: 'QualifiedNum',
          // },
          {
            label: '检测方式',
            prop: 'ProduceCheckMethod',
          },
          {
            label: '不合格数量',
            prop: 'UnqualifiedNum',
          },
          {
            label: '完成率',
            prop: 'CompletionRate',
          },

          {
            label: '加工流程',
            prop: 'ProcessInfo',
          },
          {
            label: '创建者',
            prop: 'Creator',
          },
          {
            label: '创建时间',
            prop: 'CreateTime',
          },
        ],
        list: [],
        imageList: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          MatchString: '',
        },

        type: 'add',
        ProducationData: [],
        DetectActionData: [],
        DetectDeviceData: [],
        WorkOrderList: [],

        LogList: [],
      }
    },
    computed: {
      ...mapGetters({
        username: 'user/username',
      }),
      finallyColumns() {
        return this.columns.filter((item) =>
          this.checkList.includes(item.label)
        )
      },
    },
    created() {
      this.fetchData()
    },
    methods: {
      tableRowClassName({ row, rowIndex }) {
        console.log(';rowIndex')
        if (row.ProductPriority == '重点') {
          return 'warning-row'
        }
        return ''
      },
      handleClose222() {
        this.dialogVisible222 = false
      },
      handleEdit11() {
        OrderManager({
          Index: 0,
          Count: 10,
          MatchString: '未加工',
        }).then((res) => {
          console.log('res', res)
          this.WorkOrderList = res.WorkOrderList
          this.dialogVisible1 = true
        })
      },
      submit1() {
        console.log('submit1')
        OrderInsertion(this.form1).then((res) => {
          console.log(res)
          this.$baseMessage('提交成功', 'success', 'vab-hey-message-success')
          this.dialogVisible1 = false
          this.fetchData()
        })
      },
      handleEdit1(row) {
        this.$router.push({
          path: '/production/workflow',
          query: { OrderId: row.OrderId },
        })
      },
      async jiagong(row) {
        await StartOrderProcess({ OrderId: row.OrderId })
        this.list = []
        this.form.OrderId = ''
        await this.fetchData()
      },
      producationChange(e) {
        const data = this.ProducationData.filter(
          (item) => item.ProducationName == e
        )
        this.form.ProducationId = data[0]['ProducationId']
      },
      handleClose() {
        this.form = {
          OrderId: '',
          OrderName: '',
          ProducationId: '',
          ProducationName: '',
          StartTime: '',
          PlanPayTime: '',
          PartNum: '',
          DetectDevice: '',
          DetectAction: '',
          TipsTime: '',
        }
        this.dialogVisible = false
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      handleEdit21(row) {
        // this.dialogVisible222 = true
        console.log('row', row)
        Mark({ OrderId: row.OrderId }).then((res) => {
          console.log(res)
          this.fetchData()
          // this.LogList = res.LogList
        })
      },
      handleEdit(row) {
        GetProduction().then((res) => {
          console.log('resres', res)
          this.ProducationData = res.ProductInfo
        })
        GetDetectAction().then((res) => {
          console.log('resres', res)
          this.DetectActionData = res.DetectAction
        })
        GetDetectTion().then((res) => {
          console.log('resres', res)
          this.DetectDeviceData = res.DetectTion
        })

        if (row.OrderId) {
          this.form = row
          this.type = 'edit'
        } else {
          this.type = 'add'
        }
        this.dialogVisible = true
      },
      submit() {
        this.form.StartTime = this.days(this.form.StartTime)
        this.form.PlanPayTime = this.days(this.form.PlanPayTime)
        this.form.TipsTime = this.days(this.form.TipsTime)

        this.form.Creator = this.username
        if (this.type == 'add') {
          console.log('typetype', this.type)
          PlanAndProductionAdd(this.form).then((res) => {
            this.$baseMessage('提交成功', 'success', 'vab-hey-message-success')
          })
        } else {
          RenameOrder(this.form).then((res) => {
            this.$baseMessage('更新成功', 'success', 'vab-hey-message-success')
          })
        }
        this.dialogVisible = false
        this.fetchData()
      },
      handleDelete(row) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await PlanAndProductionDelete({
            OrderId: row.OrderId,
          })
          // $baseMessage(msg, 'success', 'vab-hey-message-success')
          await this.fetchData()
        })
        return false
        if (row.id) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ ids: row.id })
            this.$baseMessage(msg, 'success', 'vab-hey-message-success')
            await this.fetchData()
          })
        } else {
          if (this.selectRows.length > 0) {
            const ids = this.selectRows.map((item) => item.id).join()
            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids })
              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
              await this.fetchData()
            })
          } else {
            this.$baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
          }
        }
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const params = {
          Index: this.getPage(this.queryForm.pageNo, this.queryForm.pageSize),
          Count: this.queryForm.pageSize,
          MatchString: this.queryForm.MatchString,
        }
        PlanAndProductionList(params).then((res) => {
          console.log('MaterInfo', res)
          this.list = res.WorkOrderList
          this.total = res.TotalCount
          this.listLoading = false
        })
      },
    },
  }
</script>
<style>
  .el-table .warning-row {
    background: oldlace !important;
  }
</style>
